<!-- import ValidateInput from './ValidateInput.vue'; -->
<!-- <template>
    <div class="create-post-page">
        <h4>新建文章</h4>
    <ValidateForm @form-submit="onFormSubmit">
            <div class="mb-3">
        <label for="" class="form-label"> 文章标题：</label>
                <ValidateInput placeholder="请输入文章标题"
        type="text"
        :rules="titleRules"
        v-model="titleVal"
        ></ValidateInput>  
            </div>
        </div>
    <div class="mb-3">
        <label for=""  class="form-label">文章详情：</label>
        <ValidateInput
        placeholder="请输入文章详情"
        rows="10"
        tag="textarea"
        type="text"
        :rules="contentRules"
        v-model="contentVal"
        @value="contentValue"
     ></ValidateInput>        
    </div>
    <template #submit>
    <button class="btn btn-primary btn-large" >发表文章</button>
   </template>
</ValidateForm>
</template> -->
<template>
    <div class="create-post-page">
        <h4>新建文章</h4>
        <ValidateForm @form-submit="onFormSubmit">
            <div class="mb-3">
            <label for="" class="form-label">文章标题：</label>
            <ValidateInput 
             placeholder="请输入文章标题"
             type="text"
             :rules="titleRules"
             v-model="titleVal"
             ></ValidateInput>
        </div>
        <div  class="mb-3">
            <label for="" class="form-label">文章详情：</label>
            <ValidateInput
             placeholder="请输入文章详情"
             rows="10"
             tag="textarea"
             type="text "
            :rule="contentRules"
            v-model="contentVal"
            @value="contentValue"
            ></ValidateInput>
        </div>
        <template #submit>
            <button class="btn btn-primary btn-large">发表文章</button>
        </template>
        
        
        </ValidateForm>
</div>
</template>


<script lang="ts">
import { defineComponent,ref } from "vue";
import { useStore } from "vuex";
import { GolbalDataProps } from '@/store';
import { useRoute,useRouter } from 'vue-router';
import ValidateForm from "./ValidateForm.vue";
import ValidateInput,{ PostProps } from "./ValidateInput.vue";
import { RulesProp } from "@/testData";
export default defineComponent({
    name:"CreatePost",
    components:{
        ValidateForm,
        ValidateInput,
        
    },
    setup(){
        const  titleVal=ref("");
        const  titleValue= (Val:string ) =>{
            titleValue.value=val;
        };
        const router=useRouter();
        const store= useStore<GobalDateProps>();
        const titleRules: RulesProp= [ 
            { type:"required",message:"文章标题不能为空"},
       ];
       const contentVal= ref("");
       const contentValue =(val:string )=>{
        contentVal.value=val;
       };
     const contentRules: RulesProp=[
        {
            type:"required",
            message: "文章详情不能为空",        
        },
       ];
    const  onFormSubmit =(result:boolean)=>{
        if(result){
            const { columnId }= store.state.user;
            if(columnId){
                const newPost : PostProps ={
                    id: new Date().getTime(),
                    title: titleVal.value,
                    content:contenVal.value,
                    columnId,
                    createdAt: new Date().toLocaleString(),              
                  };
             // 自动跳转到详情页
            store.commit("createPost",newPost);
            router.push({ name: "column", params:{ }});
            }
        }
    };
    return {
        titleVal,
        titleRules,
        contenVal,
        contentRules,
        onFormSubmit,
        titleValue, 
        contentValue,
    };
     },
}); 
</script>

<style></style> 